<template>
	<view>
		<view class="account-setting">
			<view class="account-item" @click="onEditTelClick">
					<label class="account-item-label">更换手机号</label>
					<label class="account-item-text">{{tel}}</label>
					<label class="account-item-arrow"></label>
			</view>
			<view class="account-item" @click="onEditPassWordClick">
					<label class="account-item-label">更改密码</label>
					<label class="account-item-text">******</label>
					<label class="account-item-arrow"></label>
			</view>
			<view class="account-item" @click="onCancelAccountClick">
					<label class="account-item-label">注销账号</label>
					<label class="account-item-arrow"></label>
			</view>
		</view>
		<button type="default" class="loginOut-btn" @click="onLoginOutClick">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel:"186****1688"
			}
		},
		methods: {
			onLoginOutClick() {
				console.log("退出登录")
			},
			onEditTelClick(){
				uni.navigateTo({
					url:"./editTel"
				})
			},
			onEditPassWordClick(){
				uni.navigateTo({
					url:"./editPassWord"
				})
			},
			onCancelAccountClick(){
				uni.navigateTo({
					url:"./cancelAaccount"
				})
			}
		}
	}
</script>

<style>
page {
		background: #F4F4F4;
	}

	.account-setting {
		margin: 26rpx 32rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		padding: 0 32rpx;
	}

	.account-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #E5E5E5;
	}
.account-item:last-child{
	border: 0;
}
	.account-item:active {
		opacity: 0.8;
	}

	.account-item-label {
		font-size: 30rpx;
		color: #181818;
		flex: 1;
	}

	.account-item-text {
		font-size: 28rpx;
		color: #ACACAC;
		flex: 1;
		text-align: right;
	}

	.account-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}

	.loginOut-btn {
		position: fixed;
		bottom: 98rpx;
		background-color: #FFFFFF !important;
		color: #1371FF !important;
		font-size: 30rpx !important;
		border: 0 !important;
	}

	.loginOut-btn:active {
		opacity: 0.7;
	}

	.loginOut-btn::after {
		display: none;
	}
</style>
